<script setup>
import { ref } from 'vue'
import { Icon } from '@iconify/vue';

defineProps({
  msg: String,
})

const count = ref(0)
</script>

<template>
  <h3>{{ msg }}</h3>

  <!-- 使用 Iconify 图标 -->
  <Icon icon="mdi:home" width="32" height="32" />
  <Icon icon="ri:building-2-line" width="32" height="32" />
  <Icon icon="devicon:bazel" width="32" height="32" />
  <Icon icon="streamline-kameleon-color:camera-front" width="32" height="32" />
  <Icon icon="carbon:user-avatar" style="color: #42b883;" />

  <!-- 使用自定义图标 -->
  <icon-mdi-home width="48" height="48" />
  <icon-devicon-bazel width="48" height="48"/>
  <icon-streamline-kameleon-color-cocktail width="48" height="48" />
  <icon-meteocons-pollen-grass width="96" height="96" />

  <fetch-data-test />


  <div class="card">
    <button type="button" @click="count++">count is {{ count }}</button>
  </div>

</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
